import 'package:flutter/material.dart';
import 'package:tetris_series/panel/contoller.dart';
import 'package:tetris_series/panel/screen.dart';

const SCREEN_BORDER_WIDTH = 3.0;
const Color COLOR_SCREEN_BACKGROUND = Color(0xff9ead86);

class PageLand extends StatefulWidget {

  const PageLand({Key key}):super(key: key);

  @override
  State<StatefulWidget> createState() => PageLandState();
}

class PageLandState extends State<PageLand> {

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return SizedBox.expand(
      child: Container(
        color: Colors.yellow,
        child: Padding(padding: MediaQuery.of(context).padding,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              _GameScreen(child: Screen.fromHeight(height * 0.8)),
              Expanded(
                child: GameSettingsButtonGroup(),
              ),

              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 40, bottom: 40),
                      child: GameMainButton(),
                    ),
                    Spacer(),
                    Padding(
                      padding: const EdgeInsets.only(right: 40, bottom: 40),
                      child: GameDirectionButtonGroup(),
                    )
                  ],
                ),
              ),
            ],
          ),)
      )
    );
  }
}

class _GameScreen extends StatelessWidget {
  final Widget child;

  const _GameScreen({Key key, @required this.child}) : super(key:key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          left: BorderSide(color: const Color(0xFF987F0F), width: SCREEN_BORDER_WIDTH),
          top: BorderSide(color: const Color(0xFF987F0F), width: SCREEN_BORDER_WIDTH),
          right: BorderSide(color: const Color(0xFFFAE36C), width: SCREEN_BORDER_WIDTH),
          bottom: BorderSide(color: const Color(0xFFFAE36C), width: SCREEN_BORDER_WIDTH),
        )
      ),
      child: Container(
        decoration: BoxDecoration(border: Border.all(color: Colors.black54)),
        child: Container(
          padding: const EdgeInsets.all(SCREEN_BORDER_WIDTH),
          color: COLOR_SCREEN_BACKGROUND,
          child: child,
        ),
      ),
    );
  }
}